<template>
  <div class="news-container">
    <div class="news-container__l">
      <card-container
        title="新闻速递"
        width="938px"
      >
        <project-card v-for="(val,index) in newsList" :key="val.contentId" :info="val"></project-card>
        <empty-card v-if="newsList.length===0" height="556px"></empty-card>
      </card-container>
      <div class="pagination">
        <pagination style="margin: 0 auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
      </div>
    </div>
    <div class="news-container__r">
      <card-container
        style="padding-bottom:10px;max-height: 426px;"
        title="行业资讯"
        width="302px"

      >
        <div style="padding: 14px 16px;">
          <div @click="changeRoute2('/news/detail/'+val.contentId)" class="information-wrap" v-for="(val,index) in informationList" :key="val.contentId">
            <p class="information-time">{{dateConvert(val.createTime)}}</p>
            <p class="information-content">{{val.title}}</p>
          </div>
        </div>
      </card-container>
      <card-container
        style="padding-bottom:10px;margin-top: 16px; max-height: 426px;"
        title="每周软件推荐"
        label="周一3:00更新"
        width="302px"
      >
        <div class="software-container">
          <div @click="changeRoute2('/news/detail/'+val.contentId)"  class="software-wrap" v-for="(val,index) in recruitmentList" :key="val.contentId">
            <p class="software-rank">{{index + 1}}</p>
            <div class="software-img-wrap">
              <img class="software-img"
                   :src="val.cover" alt="">
            </div>
            <div class="software-main">
              <p class="software-title">{{val.title}}</p>
              <p class="software-content">{{val.subTitle}}</p>
            </div>
          </div>
        </div>
      </card-container>

      <card-container
        style="padding-bottom:10px;margin-top: 16px; max-height: 426px;"
        title="软件更新"
        width="302px"


      >
        <div class="software-container">
          <div @click="changeRoute2('/news/detail/'+val.contentId)"  class="software-wrap" v-for="(val,index) in recruitmentList" :key="val.contentId">
            <div class="software-img-wrap">
              <img class="software-img"
                   :src="val.cover" alt="">
            </div>
            <div class="software-main">
              <p class="software-title">{{val.title}}</p>
              <p class="software-content">{{val.subTitle}}</p>
            </div>
          </div>
        </div>
      </card-container>
    </div>
  </div>
</template>

<script>
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
import config from '../../action/config';
import EmptyCard from "../../components/pc/emptyCard";
import {dateConvert} from '../../action/utils/dataConvert'

export default {
  components: {EmptyCard, ProjectCard, CardContainer, Pagination},
  data() {
    return {
      newsList: [],
      informationList: [],
      recruitmentList: [],
      recommendedSoftwareList: [],
      softwareUpdatesList: [],
      pages: 1,
      currentPage: 1
    }
  },
  created() {
    this.dataGetNewsList(1);
    this.dataGetInformationList();
    this.dataGetRecommendedSoftwareList();
    this.dataGetRecruitmentList();
    this.dataGetSoftwareUpdatesList();
  },
  methods: {

    changeRoute2(r){
      let routeUrl = this.$router.resolve({
        path: r
      });
      window.open(routeUrl.href,'_blank')
    },

    dataGetNewsList(currentPage) {
      let params = {
        page: currentPage,
        size: 12,
        type: 1
      };
      this.$axios.$get(config.api.get.Content.list + '/13/contents',
        {
          params: params
        }).then((response) => {
        this.newsList = response.data.dataList;
        this.pages = response.data.totalPage;
      })
    },
    dataGetInformationList() {
      this.$axios.$get(config.api.get.Content.list + '/14/contents', {
        params: {
          page: 1,
          size: 6,
          type: 1
        }
      }).then((response) => {
        this.informationList = response.data.dataList;
      })
    },
    dataGetRecruitmentList() {
      this.$axios.$get(config.api.get.Content.list + '/15/contents', {
        params: {
          page: 1,
          size: 5,
          type: 1
        }
      }).then((response) => {
        this.recruitmentList = response.data.dataList;
      })
    },
    dataGetRecommendedSoftwareList() {
      this.$axios.$get(config.api.get.Content.list + '/16/contents', {
        params: {
          page: 1,
          size: 5,
          type: 1
        }
      }).then((response) => {
        this.recommendedSoftwareList = response.data.dataList;
      })
    },
    dataGetSoftwareUpdatesList() {
      this.$axios.$get(config.api.get.Content.list + '/17/contents', {
        params: {
          page: 1,
          size: 5 ,
          type: 1
        }
      }).then((response) => {
        this.softwareUpdatesList = response.data.dataList;
      })
    },
    changePage(currentPage) {
      //返回页数 请求新的数据
      this.dataGetNewsList(currentPage);
    },
    dateConvert(time) {
      return dateConvert(time);
    }
  }
}
</script>

<style lang="scss" scoped>
  .news-container {
    width: $pageWidth;
    margin: 0 auto;
    padding-top: 40*$length;
    padding-bottom: 32*$length;
    @extend %flex-row-spb;
    align-items: start;

    .news-container__l {
      .pagination {
        margin: 32*$length;
      }
    }

    .news-container__r {
      .information-wrap {
        padding-bottom: 12*$length;

        .information-time {
          @extend %cursorPointer;
          @include fontStyle(12, 16, 500, #CCC, left);
        }

        .information-content {
          width: 100%;
          overflow: hidden;
          margin-top: 3*$length;
          @extend %nowrap;
          @extend %cursorPointer;
          @extend %animate-transition;
          @include fontStyle(14, 19, 500, #333, left);

          &:hover {
            color: #00AAE6;
          }
        }
      }

      .software-container{
        padding: 0 16*$length;
        .software-wrap {
          padding-top: 16*$length;
          @extend %flex-row-spb;
          justify-content: flex-start;
          .software-rank {
            margin-right: 8*$length;
            @include fontStyle(14, 19, 500, #2F2F2F, left);
          }
          .software-img-wrap {
            width: 48*$length;
            height: 48*$length;
            @include border-radius(4*$length);

            .software-img {
              width: 48*$length;
              height: 48*$length;
              object-fit: contain;
              @include border-radius(4*$length);
            }
          }

          .software-main {
            width: 100%;
            overflow: hidden;
            margin-left: 10*$length;
            @extend %cursorPointer;

            .software-title {
              margin-bottom: 4*$length;
              @include fontStyle(14, 19, 500, #2F2F2F, left);
              @extend %animate-transition;
              @extend %nowrap;

              &:hover {
                color: #00AAE6;
              }
            }

            .software-content {
              @extend %nowrap;
              @include fontStyle(12, 16, 500, #999999, left);
            }
          }
        }
      }
    }
  }
</style>
